<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<h2>登录系统界面</h2>
		
		<link rel="stylesheet" href="css/bootstrap0.min.css" />
		<style>
			
			
			
		</style>
		
		<script>
			function Login(){
				var msg = document.getElementById("msg");
				var username = document.getElementById("username");
				var psaaword =document.getElementById("password");
				
				alert("用户名："+username.value+"，密码：“+Password.value);
				
msg.innerHTML ="<font>登录成功</font><div>欢迎："+username.value+"</div>'';
				msg.style ="display:block;"
				
				
				
			}
			
			//获取页面的input框
			
			function Clear(){
				var inputs = document.getElementsByTagName("input");
				for (var i = 0; i < inputs.length; i++) {
					if (inputs[i].type=='text'||inputs[i].type=='password') {
						inputs[i].value='';
					} 
				}
			}
			
			
			
		</script>
		
		
		
		
	</head>
	<body>
		<div>
			<div id="msg"></div>
			<section>
				<fieldset>
					<legend>登录</legend>
					<div>
						<label for="username">用户名：</label>
						<input type="text" class="form-control" 
						autocomplete="off"
						autofocus="autofocus"
						placeholder="请输入用户名..."
						id="username" name="username"
						/>
																							
					</div>
					
					<div>
						<label for="password">密码：</label>
						<input type="password" class="form-control"
						autocomplete="off"
						placeholder="请输入密码..."
						id="password" name="password"
						/>
						
					</div>
					<div>  
					<button class="btn btn-primary" value="submit" onclick="Login()">提交</button>
					<button class="btn btn-primary" value="clear" onclick="Clear()">取消</button>
					
					</div>
					
				</fieldset>
													
							</section>
									
		</div>
				
	</body>
	
	<script>
		//后期绑定，给按钮增加onclick事件
		
		var btnLogin = document.getElementById("btnLogin");
		btnLogin.addEventListener('click',function(){Login();});
		var btnClear = document.getElementById('btnClear');
		btnClear.addEventListener('click',function(){Clear();})
		
	</script>
	
	
</html>
